html,body{
	margin:0;
	padding:0;
}

body{
	background-color: #E6E6e6;
	height: 100%;
	width: 100%;
}
.container{
  width: 340px;
  background-color: white;
  display: block;
  /*margin: 0 auto;*/
  margin-top: 100px;
  height: 171px;
  overflow: hidden;
  border-radius: 10px;
  -webkit-border-radius:10px;
  -moz-border-radius:10px;
  position: absolute;
  z-index: 1;
  margin-left: 100px;
}
ul{
	margin: 0px;
	padding: 0px;
	margin: 0px;
  	padding: 0px;
  	position: absolute;
 	width: 100%;
 	z-index: 0;
 	/*旧版*/
 	display: -webkit-box;
 	display: -moz-box;
 	/*混合版*/
 	display: -ms-flexbox;
 	/*新版*/
 	display: -webkit-flex;
 	display: flex;
 	/*垂直排列*/
 	-moz-box-orient:vertical;
 	-webkit-box-orient:vertical;
 	box-orient:vertical;

	-ms-flex-direction: column;

	-webkit-flex-direction: column;
	flex-direction: column;
	/*伸缩项目拉伸填充整个伸缩容器*/
 	-webkit-box-align:stretch;
 	-moz-box-align:stretch;
 	box-align:stretch;

	-ms-flex-align:stretch;

	-webkit-align-item:stretch;
	align-item:stretch;
}
li{
	padding-left: 0px;
	/*width: 100%;*/  
	height: 17px;
	text-align: center;
	list-style: none;
	vertical-align: center;
	padding: 20px 0;
	color: white;
	font-weight: bold;
}
ul li:nth-child(1){
	background-color: #2B8CD6;

	/*重置伸缩项目的原顺序*/
	-webkit-box-ordinal-group:0;
	-moz-box-ordinal-group:0;
	box-ordinal-group:0;

	-ms-flex-order:0;

	-webkit-order:0;
	order:0;
}
ul li:nth-child(2){
	background-color: #D62934;

	/*重置伸缩项目的原顺序*/
	-webkit-box-ordinal-group:0;
	-moz-box-ordinal-group:0;
	box-ordinal-group:0;

	-ms-flex-order:0;

	-webkit-order:0;
	order:0;
}
ul li:nth-child(3){
	background-color: #7429D6;

	/*重置伸缩项目的原顺序*/
	-webkit-box-ordinal-group:0;
	-moz-box-ordinal-group:0;
	box-ordinal-group:0;

	-ms-flex-order:0;

	-webkit-order:0;
	order:0;
}
ul li:nth-child(4){
	background-color: #D67429;

	/*重置伸缩项目的原顺序*/
	-webkit-box-ordinal-group:0;
	-moz-box-ordinal-group:0;
	box-ordinal-group:0;

	-ms-flex-order:0;

	-webkit-order:0;
	order:0;
}
ul li:nth-child(5){
	background-color: #71766F;

	/*重置伸缩项目的原顺序*/
	-webkit-box-ordinal-group:0;
	-moz-box-ordinal-group:0;
	box-ordinal-group:0;

	-ms-flex-order:0;

	-webkit-order:0;
	order:0;
}

.button {
  margin-left: 120px;
  padding-top: 310px;
}

button {
  width: 60px;
  border: 1px solid #069DD4;
  padding: 10px 0;
  font-size: 16px;
  -moz-border-radius: 5px;
  -webit-border-radius: 5px;
  border-radius: 5px;
  outline: none;
  cursor: pointer;
  margin-right: 16px;
}
button:hover{
	background-color: #A8A8A8;
	color: white;
}


/*CSS绘制三角形*/
.triangle {
  width: 0px;
  height: 0px;
  border-right: 20px solid wheat;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  position: relative;
  top: 166px;
  left: 420px;
  z-index: 20;
}